
<template>
    <div class='booklist-container'>
        <div class="list-top">
            <el-checkbox
                v-model="checkAll"
                :indeterminate="(checkedBooks.length > 0 && checkedBooks.length < allBookIds.length)"
                @change="handleCheckAllChange"
            >全部文件</el-checkbox>
            <span  class="top-right">共 {{ bookList.length }} 个</span>
            <span v-if="checkedBooks.length > 0" class="top-right">已选 {{ checkedBooks.length }} 个/</span>
        </div>
        <div class="checkbox-box">
            <el-checkbox-group
                v-model="checkedBooks"
                @change="handleCheckedBookChange"
            >
                <el-row :gutter="30">
                    <el-col class="book-one" :span="6" v-for="(book, i) in bookList" :key="i">
                        <el-popover
                            :width="300"
                            :placement="i > 3 ? 'top' : 'bottom'"
                            :show-after="100"
                            :hide-after="100"
                            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
                        >
                            <template #reference>
                                <el-card 
                                    :class="{'is-hovered': book.is_hovered, 'no-hovered': book.no_hovered, 'is-select_checked': !(checkedBooks.indexOf(book.id) === -1)}" 
                                    shadow="never"
                                >
                                    <el-dropdown placement="bottom-end" hide-timeout=100>
                                        <span class="el-dropdown-link">
                                            <el-icon class="book-one-more"><MoreFilled /></el-icon>
                                        </span>
                                        <template #dropdown>
                                            <el-dropdown-menu :class="{'is-menu-hovered': book.is_hovered, 'no-menu-hovered': !book.is_hovered}" @mouseenter="dropdownMenuMouseEnter(book, i)" @mouseleave="dropdownMenuMouseLeave(book, i)">
                                                <el-dropdown-item @click="doMove(book)">添加至</el-dropdown-item>
                                                <el-dropdown-item @click="doEdit(book, i)">编辑</el-dropdown-item>
                                                <el-dropdown-item @click="doDelete(book)">删除</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>

                                    <el-checkbox :label="book.id">
                                        <span v-if="!book.edit_flag">
                                            <div class="book-box">
                                                <div class="book-left">
                                                    <img src="src/assets/images/file.png" class="left-img"/>
                                                </div>
                                                <div class="book-right">
                                                    <div class="book-name">{{ book.name }}</div>
                                                    <div class="book-abstract">{{ book.abstract }}</div>
                                                    <div class="book-time">{{ book.create_time }}</div>
                                                </div>
                                            </div>
                                        </span>
                                        <span v-else>
                                            <div class="book-box">
                                                <div class="book-left">
                                                    <img src="src/assets/images/file.png" class="left-img"/>
                                                </div>
                                                <div class="book-right">
                                                    <div class="book-name"><el-input v-model="book.name" size="small" placeholder="请输入文件名" clearable /></div>
                                                    <div class="book-abstract">{{ book.abstract }}</div>
                                                    <div class="book-time">{{ book.create_time }}</div>
                                                    <div class="add-edit-icon">
                                                        <el-icon :size="20" color="#409EFC" @click.prevent="editPost(book, i)"><SuccessFilled /></el-icon>
                                                        <el-icon :size="20" color="#409EFC" @click.prevent="closeEdit(i)" style="margin-left: 3px;"><CircleCloseFilled /></el-icon>
                                                    </div>
                                                </div>
                                            </div>
                                        </span>
                                        
                                    </el-checkbox>
                                </el-card>
                            </template>
                            <template #default>
                                <div class="book-one-detail" style="display: flex; gap: 6px; flex-direction: column; color: #262626;">
                                    <div class="detail-title" style="font-weight: bold;">{{ book.name }}</div>
                                    <div class="detail-one">发布日期：2022–11-23</div>
                                    <div class="detail-one">更新日期：2022–11-23</div>
                                    <div class="detail-one">更新频率：实时</div>
                                    <div class="detail-one">数据格式：数据集</div>
                                    <div class="detail-one">数据单元：91个</div>
                                    <div class="detail-one">数据项：123个</div>
                                    <div class="detail-one">描述：该数据集包含所有热轧带肋钢筋生产线的评价信息及生产信息</div>
                                </div>
                            </template>
                        </el-popover>
                    </el-col>
                </el-row>
            </el-checkbox-group>
        </div>
        <el-dialog v-model="moveDialogVisible" title="添加到" width="30%" draggable :destroy-on-close="true">
            <div class="move-dialog-box">
                <div class="move-top">
                    <SpaceCrumb v-if="(movePageLayer > 0)" :page-layer="movePageLayer" :crumb-list="moveCrumbList" />
                    <span class="no-layer" v-else>全部文件</span>
                </div>
                <div class="move-folder-list">
                    <div v-for="(item, k) in moveBookList" :key="k">
                        <div v-if="item.type !== 'file'" :class="{'move-folder-one': true, 'move-is-selected': item.is_selected}" @click="moveOneClick(item, k)" @dblclick="moveDblClick(item, k)">
                            <img class="move-folder-img" src="src/assets/images/folder.png">
                            <div class="move-folder-name">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="moveDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="movePost">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <el-button class="add-to-book-btn" type="primary" @click="addToBook">添加至数据台账</el-button>
    </div>
</template>
<script setup lang='ts'>
// import { getBookList } from '@/ajax';
import { setStorage, getStorage, DateFormat } from "../../utils/storage";
import { ref, reactive, getCurrentInstance } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import SpaceCrumb from './moveCrumb.vue'

const { proxy } = getCurrentInstance() as any
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedBooks = ref([])
const allBookIds = reactive([])
const bookCount = ref(0)
// 本层级信息可能会用到的参数，根据后端来，暂勿删！
const thisCrumb = ref({}) as any
const rootId = ref(0)
const parentId = ref(0)
const id = ref(0)
const name = ref('')
const bookList = ref([]) as any

// 新建/编辑/添加文件文件夹
const editFlag = ref(false)
const addFlag = ref(false)
const updateTime = ref('')
const moveDialogVisible = ref(false)
const movePageLayer = ref(0)
const moveCrumbList = ref([]) as any
const moveBookList = ref([]) as any
const lastMoveK = ref(-1) as any
const moveFile = ref({}) as any
const moveTo = ref({}) as any

// 选择/全选
const handleCheckAllChange = (val: boolean) => {
    checkedBooks.value = val ? allBookIds : []
    isIndeterminate.value = false
}
const handleCheckedBookChange = (value: string[]) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === bookList.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < bookList.length
}

// 鼠标移入移出‘三个点’ 
const dropdownMenuMouseEnter = (book: any, i: string|number) => {
    bookList.value[i].is_hovered = true
}
const dropdownMenuMouseLeave = (book: any, i: string|number) => {
    setTimeout(function(){
        bookList.value[i].is_hovered = false
    }, 120)
}

const addToBook = () => {
    if (checkedBooks.value.length == 0) {
        ElMessage.closeAll()
        ElMessage({
            type: 'warning',
            message: "请选择文件",
        })

        return
    } else {
        doMove(checkedBooks.value)
    }
}
// 三个点的添加、编辑、删除
const doMove = (book: any) => {
    console.log('----move------')
    // todo: 记录添加哪个(些)文件/文件夹
    moveFile.value = book
    moveBookList.value = [
        {
            id: 1,
            root_id: 0,
            parent_id: 0,
            name: "机构基本信息1",
            abstract: "机构基本信息合集",
            type: "folder",
            create_time: "2022–11-23 10:23"
        },
        {
            id: 2,
            root_id: 0,
            parent_id: 0,
            name: "机构用户信息2",
            abstract: "存放机构用户信息",
            type: "folder",
            create_time: "2022–11-23 10:23"
        },
        {
            id: 3,
            root_id: 0,
            parent_id: 0,
            name: "绿色评价信息3",
            abstract: "存放绿色评价信息",
            type: "folder",
            create_time: "2022–11-23 10:23"
        },
        {
            id: 4,
            root_id: 0,
            parent_id: 0,
            name: "金融服务信息4",
            abstract: "存放金融服务信息",
            type: "folder",
            create_time: "2022–11-23 10:23"
        }
    ]
    moveCrumbList.value = getStorage('crumb') || []
    movePageLayer.value = moveCrumbList.value.length
    // setStorage('move_crumb', moveCrumbList.value)
    moveDialogVisible.value = true
}
// 单机选中一个
const moveOneClick = (book: any, i: string|number) => {
    console.log(i, lastMoveK.value)
    if (lastMoveK.value > -1) {
        moveBookList.value[lastMoveK.value].is_selected = false
    }
    moveBookList.value[i].is_selected = true
    moveTo.value = book
    
    console.log(moveBookList.value)
    lastMoveK.value = i
}
// 双击进下一层
const moveDblClick = (book: any, i: string|number) => {
    console.log(movePageLayer.value)
    if (lastMoveK.value > -1) {
        moveBookList.value[lastMoveK.value].is_selected = false
        lastMoveK.value = -1
    }
    movePageLayer.value += 1
    
    let crumbOne = {
        'id': book.id,
        'name': book.name,
        'parent_id': book.parent_id || 0,
        'root_id': book.root_id || 0
    }
    
    // let moveCrumbList = getStorage('move_crumb') || []
    moveCrumbList.value.push(crumbOne)
    // setStorage('move_crumb', moveCrumbList)

    moveBookList.value = [
        {
            id: 1,
            root_id: 0,
            parent_id: 0,
            name: "机构基本信息11",
            abstract: "机构基本信息合集",
            type: "folder",
            create_time: "2022–11-23 10:23"
        },
        {
            id: 2,
            root_id: 0,
            parent_id: 0,
            name: "机构用户信息22",
            abstract: "存放机构用户信息",
            type: "folder",
            create_time: "2022–11-23 10:23"
        },
        {
            id: 3,
            root_id: 0,
            parent_id: 0,
            name: "绿色评价信息33",
            abstract: "存放绿色评价信息",
            type: "folder",
            create_time: "2022–11-23 10:23"
        },
        {
            id: 4,
            root_id: 0,
            parent_id: 0,
            name: "金融服务信息44",
            abstract: "存放金融服务信息",
            type: "folder",
            create_time: "2022–11-23 10:23"
        }
    ]
}
const movePost = () => {
    if (lastMoveK.value < 0) {
        ElMessage.closeAll()
        ElMessage({
            message: '请选择账簿后添加',
            type: 'warning',
        })

        return
    }
    
    ElMessage.closeAll()
    ElMessage({
        message: '成功添加至 ' + moveTo.value.name,
        type: 'success',
    })
    console.log('move post')
    console.log(moveFile.value, moveTo.value)
    moveDialogVisible.value = false
    // proxy.$router.go(0)
}
const doEdit = (book: any, i: string|number) => {
    let nowTime = new Date()
    updateTime.value = DateFormat(nowTime, 'yyyy-MM-dd hh:mm')
    editFlag.value = true
    bookList.value[i].edit_flag = true
    setTimeout(function(){
        bookList.value[i].no_hovered = true
    }, 120)
}
const editPost = (book: any, i: string|number) => {
    if (editFlag.value) {
        ElMessage.closeAll()
        ElMessage({
            message: '编辑成功.',
            type: 'success',
        })
        console.log('edit post')
        proxy.$router.go(0)
    }
    if (addFlag.value) {
        ElMessage.closeAll()
        ElMessage({
            message: '新建成功.',
            type: 'success',
        })
        console.log('add post')
        proxy.$router.go(0)
    }
    // bookList.value[i].edit_flag = false
    // setTimeout(function(){
    //     bookList.value[i].no_hovered = false
    // }, 120)
}
const closeEdit = (i: string|number) => {
    if (editFlag.value) {
        editFlag.value = false
        bookList.value[i].edit_flag = false
        setTimeout(function(){
            bookList.value[i].no_hovered = false
        }, 120)
    }
    if (addFlag.value) {
        addFlag.value = false
        bookList.value.pop()
    }

}
const doDelete = (book: any) => {
    console.log('----Delete------')
    ElMessageBox.confirm(
        '删除此项',
        '删除内容',
        {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        }
    ).then(() => {
        ElMessage.closeAll()
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
    }).catch(() => {
        console.log('----Delete cancel------')
    })
}

// 获取bookList
const created = () => {
    // @todo:这里后续要加上watch后的参数，这里加参数是防止在本层级刷新页面----thisCrumb.value
    let params = {
        'pageNumber': 1,
        'pageSize': 1000
    };

    // let crumbList = proxy.$route.query.crumbList || []
    // let layer = proxy.$route.query.layer || 0
    // let bookInfo = {}
    // if (crumbList.length > 0) {
    //     bookInfo = crumbList[layer]
    //     params = {...params, ...bookInfo}
    // }
    // console.log(params)
    // getBookList(params).then(res => {
    //     if (res.succ) {
    //         bookList.value = res.list
    //     }
    // });
    bookList.value = [
        {
            id: 1,
            name: "机构基本信息",
            abstract: "数据单元：91个",
            type: "file",
            create_time: "数据项：123个"
        },
        {
            id: 2,
            name: "机构用户信息",
            abstract: "数据单元：91个",
            type: "file",
            create_time: "数据项：123个"
        },
        {
            id: 3,
            name: "绿色评价信息",
            abstract: "数据单元：91个",
            type: "file",
            create_time: "数据项：123个"
        },
        {
            id: 4,
            name: "金融服务信息",
            abstract: "数据单元：91个",
            type: "file",
            create_time: "数据项：123个"
        },
        {
            id: 5,
            name: "热轧带肋钢筋",
            abstract: "数据单元：91个",
            type: "file",
            create_time: "数据项：123个"
        },
        {
            id: 6,
            name: "热轧带肋钢筋信息",
            abstract: "数据单元：91个",
            type: "file",
            create_time: "数据项：123个"
        },
        {
            id: 7,
            name: "硅酸盐水泥产品",
            abstract: "数据单元：91个",
            type: "file",
            create_time: "数据项：123个"
        }
    ]
    // 初始化全选
    checkedBooks.value = []
    bookList.value.forEach((item: any) => {
        allBookIds.push(item.id)
    })
};

created();

</script>
<style lang='scss' scoped>
.booklist-container {
    margin-top: 20px;
    .add-to-book-btn {
        position: fixed;
        right: 50px;
        bottom: 100px;
    }
    .list-top {
        background: #F3F4F6;
        padding: 3px 10px;
        .top-right {
            float: right;
            line-height: 38px;
            color: #676A6C;
            margin-top: -3px;
        }
    }
    .checkbox-box {
        padding: 0 5px 20px;
    }
    .book-one {
        .book-one-more {
            -moz-transform:rotate(-90deg);
            -webkit-transform:rotate(-90deg);
        }
        
        .book-box {
            position: relative;
            display: flex;
            z-index: 8;
            width: 100%;
            .book-left {
                .left-img {
                    width: 40px;
                    height: 40px;
                    margin: 11px 3px 0 5px;
                }
            }
            .book-right {
                margin-left: 10px;
                .book-name {
                    color: #262626;
                    line-height: 22px;
                    .el-input {
                        height: 22px;
                        line-height: 22px;
                        .el-input__inner {
                            height: 22px;
                            line-height: 22px;
                        }
                    }
                }
                .book-abstract {
                    color: #676A6C;
                    line-height: 22px;
                }
                .book-time {
                    color: #94979E;
                    font-size: 13px;
                    line-height: 20px;
                }
                .add-edit-icon {
                    position: absolute;
                    right: 5px;
                    bottom: 0;
                }
            }
        }
    }
}
.move-dialog-box {
    .move-top {
        width: 100%;
        background: #F3F4F6;
        padding: 5px 15px;
        .no-layer {
            color: #94979E;
        }
    }
    .move-folder-list {
        margin-top: 8px;
        .move-folder-one {
            display: flex;
            padding: 8px 16px;
            .move-folder-img {
                width: 18px;
                height: 18px;
                margin-top: 1px;
            }
            .move-folder-name {
                font-size: 13px;
                color: #343333;
                line-height: 20px;
                margin-left: 15px;
            }
            &:hover{
                background: #E8EAEC;
                cursor: pointer;
            }
        }
        .move-folder-one.move-is-selected {
            background: #E8EAEC;
        }
    }
}
</style>
<style lang='scss'>
.booklist-container {
    .book-one {
        .el-card {
            position: relative;
            border-radius: 0;
            border: none;
            height: 90px;
            margin-top: 30px;
            .el-dropdown {
                position: absolute;
                display: none;
                top: 10px;
                right: 5px;
                z-index: 9;
                &:hover{
                    display: unset;
                }
            }
            .el-card__body {
                padding: 5px 10px;
                height: 100%;
                .el-checkbox {
                    width: 100%;
                    height: 100%;
                    .el-checkbox__label {
                        width: 100%;
                    }
                }
            }
            &:hover{
                box-shadow: none !important;
                background: #E8EAEC;
                .el-dropdown {
                    display: unset;
                }
            }
        }
        .el-card.is-hovered {
            .el-dropdown {
                display: unset !important;
            }
            background: #E8EAEC;
        }
        .el-card.no-hovered {
            .el-dropdown {
                display: none;
            }
            background: #E8EAEC;
        }
        .el-card.is-select_checked {
            .el-dropdown {
                display: none;
            }
            background: #E8EAEC;
            &:hover{
                .el-dropdown {
                    display: unset;
                }
            }
        }
        
        .book-box {
            .book-right {
                .el-input {
                    height: 22px;
                    line-height: 22px;
                    .el-input__inner {
                        height: 22px;
                        line-height: 22px;
                    }
                }
            }
        }
    }
}
.el-dialog {
    .el-dialog__header {
        border-bottom: none !important;
    }
    .el-dialog__body {
        padding-top: 5px !important;
    }
}
</style>